<template>
	<div class="homepage1">
		<div class="homepage">
			<div class="home-1">
				<span class="addres">
					<Cascader :data="data" change-on-select></Cascader>
				</span>
				<span class="put">
					<Icon type="ios-search-outline" size="18" class="sou" />
					<router-link to="addres/addres">{{put}}</router-link>
				</span>
			</div>
		</div>
		<div class="homepage2">
			<imlist :model2="model2"></imlist>
		</div>
		<iconlist :model3="model3"></iconlist>
		<second></second>
		<div>
			<tabpre :model4="model4"></tabpre>
		</div>
		<shoplist :model5="model5"></shoplist>
	</div>
</template>

<script>
	import imlist from './shouye/imlist';
	import iconlist from './shouye/iconlist';
	import second from './shouye/second';
	import tabpre from './shouye/tabpre';
	import shoplist from './shouye/shoplist';
	export default {
		name: 'homepage',

		data() {
			return {
				data: [{
						value: 'beijing',
						label: '北京',
						children: [{
								value: 'gugong',
								label: '故宫'
							},
							{
								value: 'tiantan',
								label: '天坛'
							},
							{
								value: 'wangfujing',
								label: '王府井'
							}
						]
					}, {
						value: 'jiangsu',
						label: '江苏',
						children: [{
								value: 'nanjing',
								label: '南京',

							},
							{
								value: 'suzhou',
								label: '苏州',
							}
						],
					},
					{
						value: 'gansu',
						label: '甘肃',
						children: [{
								value: 'lanzhou',
								label: '兰州',

							},
							{
								value: 'tianshui',
								label: '天水',
							},
							{
								value: 'longlan',
								label: '陇南',
							},
							{
								value: 'lingtao',
								label: '临洮',
							}
						],
					},
					{
						value: 'tianjin',
						label: '天津',
						children: [{
								value: 'nanjing',
								label: '天津',

							},
							{
								value: 'suzhou',
								label: '天津1',
							}
						],
					},
					{
						value: 'shanghai',
						label: '上海',
					},
					{
						value: 'chongqin',
						label: '重庆',
					},
					{
						value: 'hebei',
						label: '河北',
					}


				],
				put: "你想住在哪里？",
				model2: [{
						tu: "./static/shoyeimg/img/a1.jpg",
						tiao2: "secondhandhous/secondhandhous"
					},
					{
						tu: "./static/shoyeimg/img/a2.jpg",
						tiao2: "renting/renting"
					}
				],
				model3: [{
						tubiao: "./static/shoyeimg/img/b1.jpg",
						ziti: "海外",
						tiao: "overseas/overseas"
					},
					{
						tubiao: "./static/shoyeimg/img/b3.jpg",
						ziti: "买房",
						tiao: "sellinghouse/sellinghouse"
					},
					{
						tubiao: "./static/shoyeimg/img/b4.jpg",
						ziti: "查成交",
						tiao: "deal/deal"
					},
					{
						tubiao: "./static/shoyeimg/img/b5.jpg",
						ziti: "经纪人",
						tiao: "agent/agent"
					},
					{
						tubiao: "./static/shoyeimg/img/b6.jpg",
						ziti: "更多",
						tiao: "sellinghouse/sellinghouse"
					},
				],
				model4: [{
						tupian: "./static/shoyeimg/img/d1.jpg",
						title1: "基业豪庭房源",
						title2: "高品质大盘"
					},
					{
						tupian: "./static/shoyeimg/img/d2.jpg",
						title1: "一只船房源",
						title2: "好地段好房源"
					},
					{
						tupian: "",
						title1: "安宁海关房源",
						title2: "低房龄好品质"
					},
					{
						tupian: "./static/shoyeimg/img/d4.jpg",
						title1: "中海河山峻",
						title2: "新楼盘二手房"
					}
				],
				model5: [
					// {
					// 	shopimg: "dfsefdsgds",
					// 	biaoti1: "中海.河山峻 3室2厅",
					// 	biaoti2: "98.55m2/南/低楼层 共34层",
					// 	biaoti3: "满两年",
					// 	biaoti4: "随时可看",
					// 	biaoti5: "2121万",
					// 	biaoti6: "11,162元/平",
					// 	tiao3: "details/detail"
					// },	
				]
			}
		},
		mounted() {
			this.$ajax({
					method: 'post',
					url: '/housing/hous'
				}).then((res)=> {
					this.model5=res.data;
					
				})
				.catch((err)=> {
					console.log(err)
				});
		},
		components: {
			imlist,
			iconlist,
			second,
			tabpre,
			shoplist
		}

	};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.homepage {
		z-index: 999;
		width: 7.5rem;
		height: 1rem;
		background: white;
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
	}

	.home-1 {
		width: 6.75rem;
		height: 0.80rem;
		border: 1px solid gainsboro;
		margin: 0.1rem 0.3rem 0.1rem 0.3rem;
		border-radius: 0.12rem;
		display: flex;
	}

	.home-1>span {
		display: block;
	}

	.addres {
		width: 2.5rem;
		height: 0.80rem;
		line-height: 0.8rem;
		font-size: 14px;
		text-align: center;
	}

	.addres>a {
		color: black;
	}

	.sou {
		margin-left: 0.15rem !important;
	}

	.put {
		width: 5rem;
		height: 0.8rem;
		line-height: 0.9rem;
		font-size: 12px;
	}

	.put>a {
		color: gray;
	}

	.homepage2 {
		margin-top: 1rem;
	}
</style>
